
<template>
  <div class="guide_page">
    <div class="step_box" ><component ref="comp" v-bind:is="stepComponent"  :sub="stepComponentSub"></component></div>
    

    <div class="mbm step_btn">
      <a-button class="mbm mrm" type="default" @click="toPrev">{{prevBtn}}</a-button>
      <a-button class="mbm" type="primary" @click="toNext">{{nextBtn}}</a-button>
    </div>
  </div>
</template>

<script>
import GuideFirst from "./pages/guide/First.vue";
import SettingsDevice from "./pages/settings/Device.vue";
import SettingsCloud from "./pages/settings/Cloud.vue";
import TalkWhom from "./pages/talk/Whom.vue";
import TalkIntent from "./pages/talk/Intent.vue";

export default {
  name: "guide",
  data() {
    var next = [
      {
        str: "欢迎",
        next: "下一步：设备配置 >>",
        component: GuideFirst,
        sub: 0,
        func: function() {}
      },
      {
        str: "设备配置",
        next: "下一步：云服务配置 >>",
        component: SettingsDevice,
        sub: 0,
        func: function(comp) {
          comp.submitSettings();
        }
      },
      {
        str: "云服务配置",
        next: "下一步：个性化语音 >>",
        component: SettingsCloud,
        sub: 1,
        func: function(comp) {
          comp.submitSettings();
        }
      },
      {
        str: "个性化语音",
        next: "下一步：别人怎么称呼我 >>",
        component: SettingsCloud,
        sub: 2,
        func: function(comp) {
          comp.submitSettings();
        }
      },
      {
        str: "别人怎么称呼我",
        next: "下一步：来电意图处理 >>",
        component: TalkWhom,
        sub: 0,
        func: function() {}
      },
      {
        str: "来电意图处理",
        next: "下一步：完成配置，启动服务 >>",
        component: TalkIntent,
        sub: 0,
        func: function() {}
      }
    ];
    return {
      next
    };
  },
  props: ["step"],
  components: {
    GuideFirst,
    SettingsDevice,
    SettingsCloud,
    TalkWhom,
    TalkIntent
  },
  computed: {
    prevBtn() {
      return "返回上一步";
    },
    nextBtn() {
      return this.next[this.stepNum].next;
    },
    stepNum() {
      if (typeof this.step == "undefined") {
        return 0;
      }
      return parseInt(this.step);
    },
    stepComponent() {
      return this.next[this.stepNum].component;
    },
    stepComponentSub() {
      return this.next[this.stepNum].sub;
    }
  },
  methods: {
    toPrev() {
      this.routerTo(this.stepNum - 1);
    },
    toNext() {      
        var _that = this;
        let formCheck = this.$refs.comp.formCheck
        //console.log(formCheck);
        if (formCheck == 0) {
          _that.next[_that.stepNum].func(_that.$refs.comp);
          this.routerTo(_that.stepNum+1)
        }else if (formCheck == 1) {
          this.$confirm({
            title: "确认跳过本步骤？",
            content: "注意，当前步骤设置存在错误或不完整！是否强制保存？",
            okType: "danger",
            onOk() {
              _that.next[_that.stepNum].func(_that.$refs.comp);
              _that.routerTo(_that.stepNum+1)
            },
            onCancel() {}
          });
        }else if (formCheck == 2) {        
          this.routerTo(_that.stepNum+1)
        }
    },
    routerTo(stepNum){
      if( this.next.length > stepNum && stepNum >= 0){
        this.$router.push({ path: "/guide/" + stepNum });
      }else{
        this.$router.push({ path: "/"});
      }
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: auto;
  .split_left {
    height: 100%;
  }
}
.guide_page { 
  padding:50px 100px;
  .step_btn {
    text-align: center;
    margin: 0 auto;
  }
  /deep/ .device{
    width: 300px;
    margin: 20px auto;
  }
  /deep/ .cloud{
    width: 350px;
    margin: 20px auto;
  }
}
</style>